<template>
	<div class="swiperbanner_div" :bindData="bannerList">
		<mt-swipe :auto="4000" class="swiper-container " @change="handleChange">
		  <mt-swipe-item v-for="(item,index) in arr">
		  	<img  v-lazy="baseImg+item.image" :alt="index"  style="width: 100%; height: 100%;">
		  </mt-swipe-item>
		</mt-swipe>
	</div>
</template>
<script>
	export default {
		name: 'carrousel',
		data() {
			return {
				arr:[],
				baseImg:"https://md.singaporetong.com",
				swiperOpt: {
			  		loop: true,
				 	speed:1500,
				  	autoplay : {
				    	delay:3000
				  	},
				  	autoplayDisableOnInteraction : false,
			        //effect : 'fade',
				}
			}
		},
		components: {

		},
	    computed: {
	    	bannerList(){
	    		var _res = this.$store.state.index.bannerList;
	    		//console.log(_res)
                if(_res== undefined){
                    return false
                }else{
                    if(_res.length >0){
                        this.arr = _res;
                    }
                }
                
	    		return this.$store.state.index.bannerList;
	    	}
	    },
	    methods:{
	    	handleChange:function(index){
	    		//console.log(index)
	    	}
	    },
	    mounted() {
	      	this.$store.dispatch('get_bannerList');
	      	//"vue-awesome-swiper": "^2.6.7",
	    }

	}
</script>

<style rel="stylesheet" scoped>
	.swiper-container {
		width: 100%;
		height: 5.3333rem;
	}
</style>